<template>
  <section>
    <div class="header-shadow">
      <!-- 输入框 -->
      <el-form class="inputBoxGroup">
        <el-form-item label="员工姓名" class="inputBox">
          <el-input v-model="inputName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="员工号码:" class="inputBox">
          <el-input v-model="inputPhone" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="员工地址:" class="inputBox">
          <el-input v-model="inputAddress" placeholder="请输入地址"></el-input>
        </el-form-item>
        <div class="findReset inputBox">
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button type="primary" @click="resetInput">重置</el-button>
        </div>
      </el-form>
    </div>
    <div class="header-shadow-second">
      <!-- 按钮 -->
      <el-row class="butGroup">
        <div class="addNew">
          <el-button type="primary" @click="showModal">新建</el-button>
        </div>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        class="table"
        border
        style="width: 70%"
      >
        <el-table-column fixed prop="id" label="编号" width="120"></el-table-column>
        <el-table-column prop="username" label="姓名" width="120"></el-table-column>
        <el-table-column prop="sex" label="性别" width="100"></el-table-column>
        <el-table-column prop="phone" label="电话号码" width="120"></el-table-column>
        <el-table-column prop="idcard" label="身份证号" width="200"></el-table-column>
        <el-table-column prop="address" label="家庭地址" width="180"></el-table-column>
        <el-table-column prop="education" label="学历" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template slot-scope="scope">
            <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block header-shadow">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog class="fade fadeModal" :visible.sync="dialogFormVisible">
      <div class="addNewInfo">
        <el-form ref="form" label-width="70px">
          <el-form-item label="员工姓名">
            <el-input v-model="addName"></el-input>
          </el-form-item>
          <el-form-item label="员工性别">
            <el-input v-model="addSex"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="addNumber"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="addIdCard"></el-input>
          </el-form-item>
          <el-form-item label="家庭地址">
            <el-input v-model="addAdd"></el-input>
          </el-form-item>
          <el-form-item label="员工学历">
            <el-select v-model="addEducation" placeholder="-- 请选择 --">
              <el-option v-for="item in myOptions" :label="item" :key="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <!-- 按钮组 -->
          <span class="dialog-footer">
            <el-button type="primary" @click="addNewInfo">添加</el-button>
            <el-button type="info" @click="resetForm">重置</el-button>
          </span>
        </el-form>
      </div>
    </el-dialog>
    <!-- 编辑模态框 -->
    <el-dialog class="fade fadeModal" :visible.sync="dialogEditVisible">
      <div class="addNewInfo">
        <el-form ref="form" label-width="70px">
          <el-form-item visEdit="true" label="员工姓名">
            <el-input v-model="addName"></el-input>
          </el-form-item>
          <el-form-item visEdit="true" label="员工性别">
            <el-input v-model="addSex"></el-input>
          </el-form-item>
          <el-form-item visEdit="true" label="员工学历">
            <el-select v-model="addEducation" placeholder="-- 请选择 --">
              <el-option v-for="item in myOptions" :label="item" :key="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item visEdit="true" label="员工号码">
            <el-input v-model="addNumber"></el-input>
          </el-form-item>
          <el-form-item visEdit="true" label="身份证号">
            <el-input v-model="addIdCard"></el-input>
          </el-form-item>
          <el-form-item visEdit="true" label="家庭地址">
            <el-input v-model="addAdd"></el-input>
          </el-form-item>
          <!-- 按钮组 -->
          <span class="dialog-footer">
            <el-button type="primary" @click="editInfo">修改</el-button>
            <el-button type="info" @click="resetForm">重置</el-button>
          </span>
        </el-form>
      </div>
    </el-dialog>
    <!-- 查看模态框 -->
    <el-dialog class="fade" :visible.sync="dialogTableVisible">
      <div class="check">
        <el-table :data="arr">
          <el-table-column fixed prop="checkid" label="编号" width="120"></el-table-column>
          <el-table-column label="姓名" prop="checkname" width="120"></el-table-column>
          <el-table-column label="性别" prop="checksex" width="100"></el-table-column>
          <el-table-column label="电话号码" prop="checknumber" width="120"></el-table-column>
          <el-table-column label="身份证号" prop="checkidCard" width="200"></el-table-column>
          <el-table-column label="家庭地址" prop="checkadd" width="180"></el-table-column>
          <el-table-column fixed="right" label="学历" prop="checkdepartment" width="120"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- vue -->
  </section>
</template>

<script>
export default {
  methods: {
    //获取列表
    getList() {
      let that = this;
      // let data = {
      //   "phone": this.inputPhone,
      //   "address": this.inputAddress,
      //   "name": this.inputName,
      // };
      that
        .$axios({
          method: "post",
          url: "/api/selectEmp",
          data: JSON.stringify({
            phone: this.inputPhone,
            address: this.inputAddress,
            username: this.inputName,
          }),
          headers: {
            "Content-Type": "application/json;charset=utf-8",
          },
        })
        .then((data) => {
          data.data.data = data.data.data.filter(function(value,index){
              if(value.sex == 0){
                value.sex = "男"
              }else{
                value.sex = "女"
              }
              return true
          })
          that.tableData = data.data.data;
          // for (let i = 0; i < that.tableData.length; i++) {
          //   that.tableData[i].pos = that.tableData[i].position.name;
          //   that.tableData[i].dep = that.tableData[i].dept.name;
          // }
          that.total = that.tableData.length;
        });
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // 重置模态框输入内容
    resetForm() {
      this.addId = "";
      this.addName = "";
      this.addSex = "";
      this.addNumber = "";
      this.addIdCard = "";
      this.addAdd = "";
      this.addEducation = "";
    },
    // 重置搜索输入框
    resetInput() {
      this.inputName = "";
      this.inputPhone = "";
      this.inputAddress = "";
      this.getList()
    },
    // 增加信息
    addNewInfo() {
      let that = this;
      console.log(this.addEducation);
      that
        .$axios({
          method: "post",
          url: "/api/insertEmp",
          data: JSON.stringify({
            address: this.addAdd,
            id: this.addId,
            idcard: this.addIdCard,
            phone: this.addNumber,
            sex: this.addSex,
            username: this.addName,
            education: this.addEducation,
          }),
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
        })
        .then((data) => {
          that.getList();
          this.dialogFormVisible = false;
        });
      // let addId = this.addId;
      // let addName = this.addName;
      // let addSex = this.addSex;
      // let addDepartment = this.addDepartment;
      // let addNumber = this.addNumber;
      // let addIdCard = this.addIdCard;
      // let addAdd = this.addAdd;
      // let addPosition = this.addPosition;
      // let obj = {
      //   id: addId,
      //   username: addName,
      //   sex: addSex,
      //   phone: addNumber,
      //   idcard: addIdCard,
      //   address: addAdd,
      //   dep: addDepartment,
      //   pos: addPosition,
      // };
      // this.tableData.push(obj);
      // this.dialogFormVisible = false;
    },
    // 查看单行信息
    handleClick(row) {
      this.dialogTableVisible = true;
      this.arr[0].checkid = row.id;
      this.arr[0].checkname = row.username;
      this.arr[0].checksex = row.sex;
      this.arr[0].checknumber = row.phone;
      this.arr[0].checkidCard = row.idcard;
      this.arr[0].checkadd = row.address;
      this.arr[0].checkdepartment = row.education;
    },
    // 删除单行信息
    handleClickDelete(row) {
      let that = this;
      that.$axios({
          method: "post",
          url: "/api/deleteEmp",
          data: JSON.stringify({
            id: row.id,
          }),
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
        })
        .then((data) => {
          that.getList();
        });
      // let arr = this.tableData;
      // let leng = this.tableData.length;
      // for (let i = 0; i < leng; i++) {
      //   if (arr[i].id == row.id) {
      //     arr.splice(i, 1);
      //     break;
      //   }
      // }
    },
    // 编辑单行信息
    handleEdit(row) {
      this.dialogEditVisible = true;
      this.addId = row.id;
      this.addName = row.username;
      this.addSex = row.sex;
      this.addNumber = row.phone;
      this.addIdCard = row.idcard;
      this.addAdd = row.address;
      this.addEducation = row.education;
      // 当前行在数组中的行数
      let arr = this.tableData;
      this.index = arr.findIndex((item) => item.id == this.addId);
    },
    // 添加编辑信息
    editInfo() {
      this.dialogEditVisible = false;
      let that = this;
      that
        .$axios({
          method: "post",
          url: "/api/updateEmp",
          data: JSON.stringify({
            address: this.addAdd,
            education: this.addEducation,
            id: this.addId,
            idcard: this.addIdCard,
            phone: this.addNumber,
            sex: this.addSex,
            username: this.addName,
          }),
        })
        .then((data) => {
          that.getList();
        });

      // let obj = {
      //   id: this.addId,
      //   name: this.addName,
      //   sex: this.addSex,
      //   department: this.addDepartment,
      //   number: this.addNumber,
      //   idCard: this.addIdCard,
      //   add: this.addAdd,
      //   position: this.addPosition,
      // };
      // let arr = this.tableData;
      // arr.splice(this.index, 1, obj);
    },
    // 显示模态框
    showModal() {
      this.dialogFormVisible = true;
      this.addId = "";
      this.addName = "";
      this.addSex = "";
      this.addEducation = "";
      this.addNumber = "";
      this.addIdCard = "";
      this.addAdd = "";
    },
  },
  created() {
    let that = this;
    that
      .$axios({
        method: "post",
        url: "/api/selectEmp",
        data: JSON.stringify({}),
        headers: {
          "Content-Type": "application/json",
        },
      })
      .then((data) => {
         data.data.data = data.data.data.filter(function(value,index){
              if(value.sex == 0){
                value.sex = "男"
              }else{
                value.sex = "女"
              }
              return true
          })
        that.tableData = data.data.data;
        // for (let i = 0; i < that.tableData.length; i++) {
        //   that.tableData[i].pos = that.tableData[i].position.name;
        //   that.tableData[i].dep = that.tableData[i].dept.name;
        // }
        that.total = that.tableData.length;
      });
    // that
    //   .$axios({
    //     method: "post",
    //     url: "/api/findAllDept",
    //     data: JSON.stringify({}),
    //     headers: {
    //       "Content-Type": "application/json;charset=UTF-8",
    //     },
    //   })
    //   .then((data) => {
    //     let arr = data.data.data;
    //     let obj = [];
    //     for (let i = 0; i < arr.length; i++) {
    //       obj.push(arr[i].name);
    //     }
    //     that.options = obj;
    //   });
  },
  data() {
    return {
      myOptions: ["大专", "本科", "博士", "硕士"],
      // 分页
      currentPage: 1, //当前页
      pageSize: 5, //每页显示
      total: "",
      // 模态框显示状态
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogEditVisible: false,
      // 新增数据
      addId: "",
      addName: "",
      addSex: "",
      addNumber: "",
      addAdd: "",
      addIdCard: "",
      addEducation: "",
      arr: [
        {
          checkid: "",
          checkname: "",
          checksex: "",
          checknumber: "",
          checkidCard: "",
          checkadd: "",
          checkdepartment: "",
          checkposition: "",
        },
      ],
      inputName: "",
      inputPhone: "",
      inputAddress: "",

      //表格数据
      tableData: [
        // {
        //   id: 10000,
        //   name: "杨杨杨",
        //   sex: "男",
        //   number: 15884319198,
        //   idCard: "513821199608094893",
        //   add: "四川省眉山市",
        //   department: "教学部",
        //   position: "老师",
        // },
        // {
        //   id: 10001,
        //   name: "严严严",
        //   sex: "男",
        //   number: 15884319199,
        //   idCard: "513821199608094894",
        //   add: "四川省资阳市",
        //   department: "体育部",
        //   position: "老师",
        // },
        // {
        //   id: 10002,
        //   name: "兰兰兰",
        //   sex: "男",
        //   number: 15884319100,
        //   idCard: "513821199608094895",
        //   add: "四川省达州市",
        //   department: "后勤部",
        //   position: "老师",
        // },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.block {
  margin-top: 20px;
  line-height: 50px;
  text-align: center;
}
.header-shadow {
  box-shadow: 0 0 3px 1px #e4e4e4;
  padding: 20px 20px 0;
  margin-bottom: 20px;
}
.header-shadow-second {
  padding: 20px;
  box-shadow: 0 0 3px 1px #e4e4e4;
}

.fadeModal {
  margin-top: -5%;
}
.dialog-footer {
  margin-left: 70%;
}
.btnGroup {
  position: absolute;
  left: 60%;
}
.addNewInfo {
  margin: 0 auto;
  width: 80%;
}
.addNew {
  float: left;
}
.findReset {
  height: 5%;
}
.butGroup {
  width: 90%;
  margin-bottom: 1%;
}
.inputBoxGroup {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  margin: 0 auto;
}
.inputBox {
  display: flex !important;
  flex-direction: row !important;
  width: 20%;
}
</style>
